<template>
	<view>
		<view class="tips color_fff size_12 align_c" :class="{ show: ajax.loading }" @tap="getHistoryMsg">{{ ajax.loadText }}</view>
		<view class="box-1" id="list-box">
			<view class="talk-list">
				<view v-for="(item, index) in talkList" :key="index" :id="`msg-${item.id}`">
					<view class="item flex_col" :class="item.type == 1 ? 'push' : 'pull'">
						<image :src="item.pic" mode="aspectFill" class="pic"></image>
						<view class="column">
							<view class="tname" v-if="item.type == 2">{{ doctorInfo.name }}</view>
							<view v-if="item.type == 3" class="tyeps">
								<view class="tname">系统</view>
								<view class="content abc">
									<view class="ddd">
										<view class="titleb">本次咨询回答是否及时？</view>
										<view class="row">
											<view :data-id="item.id" class="column  center" @click="pingjahs(item.id, 1, 1, $event, index)">
												<view class="">
													<image v-if="item.score[0] == 1" class="pjyl" src="/static/pj/icon_43.png"></image>
													<image v-else class="pjyl" src="/static/pj/icon_37.png"></image>
												</view>
												<view class="cenwz">非常不满意</view>
											</view>

											<view :data-id="item.id" class="column center meige" @click="pingjahs(item.id, 1, 2, $event, index)">
												<view class="">
													<image v-if="item.score[0] == 2" class="pjyl" src="/static/pj/icon_44.png"></image>
													<image v-else class="pjyl" src="/static/pj/icon_39.png"></image>
												</view>
												<view class="cenwz">不满意</view>
											</view>

											<view :data-id="item.id" class="column center meige" @click="pingjahs(item.id, 1, 3, $event, index)">
												<view class="">
													<image v-if="item.score[0] == 3" class="pjyl" src="/static/pj/icon_45.png"></image>
													<image v-else class="pjyl" src="/static/pj/icon_40.png"></image>
												</view>
												<view class="cenwz">一般</view>
											</view>

											<view :data-id="item.id" class="column center meige" @click="pingjahs(item.id, 1, 4, $event, index)">
												<view class="">
													<image v-if="item.score[0] == 4" class="pjyl" src="/static/pj/icon_46.png"></image>
													<image v-else class="pjyl" src="/static/pj/icon_41.png"></image>
												</view>
												<view class="cenwz">满意</view>
											</view>

											<view :data-id="item.id" class="column center meige" @click="pingjahs(item.id, 1, 5, $event, index)">
												<view class="">
													<image v-if="item.score[0] == 5" class="pjyl" src="/static/pj/icon_47.png"></image>
													<image v-else class="pjyl" src="/static/pj/icon_42.png"></image>
												</view>
												<view class="cenwz">非常满意</view>
											</view>
										</view>
									</view>

									<view class="ddd">
										<view class="titleb">是否回答了您的问题？</view>
										<view class="row">
											<view :data-id="item.id" class="column center " @click="pingjahs(item.id, 2, 1, $event, index)">
												<view class="">
													<image v-if="item.score[1] == 1" class="pjyl" src="/static/pj/icon_43.png"></image>
													<image v-else class="pjyl" src="/static/pj/icon_37.png"></image>
												</view>
												<view class="cenwz">非常不满意</view>
											</view>

											<view :data-id="item.id" class="column center meige" @click="pingjahs(item.id, 2, 2, $event, index)">
												<view class="">
													<image v-if="item.score[1] == 2" class="pjyl" src="/static/pj/icon_44.png"></image>
													<image v-else class="pjyl" src="/static/pj/icon_39.png"></image>
												</view>
												<view class="cenwz">不满意</view>
											</view>

											<view :data-id="item.id" class="column center meige" @click="pingjahs(item.id, 2, 3, $event, index)">
												<view class="">
													<image v-if="item.score[1] == 3" class="pjyl" src="/static/pj/icon_45.png"></image>
													<image v-else class="pjyl" src="/static/pj/icon_40.png"></image>
												</view>
												<view class="cenwz">一般</view>
											</view>

											<view :data-id="item.id" class="column center meige" @click="pingjahs(item.id, 2, 4, $event, index)">
												<view class="">
													<image v-if="item.score[1] == 4" class="pjyl" src="/static/pj/icon_46.png"></image>
													<image v-else class="pjyl" src="/static/pj/icon_41.png"></image>
												</view>
												<view class="cenwz">满意</view>
											</view>

											<view :data-id="item.id" class="column center meige" @click="pingjahs(item.id, 2, 5, $event, index)">
												<view class="">
													<image v-if="item.score[1] == 5" class="pjyl" src="/static/pj/icon_47.png"></image>
													<image v-else class="pjyl" src="/static/pj/icon_42.png"></image>
												</view>
												<view class="cenwz">非常满意</view>
											</view>
										</view>
									</view>

									<view class="ddd">
										<view class="titleb">本次咨询回答是否满意？</view>
										<view class="row">
											<view :data-id="item.id" class="column center " @click="pingjahs(item.id, 3, 1, $event, index)">
												<view class="">
													<image v-if="item.score[2] == 1" class="pjyl" src="/static/pj/icon_43.png"></image>
													<image v-else class="pjyl" src="/static/pj/icon_37.png"></image>
												</view>
												<view class="cenwz">非常不满意</view>
											</view>

											<view :data-id="item.id" class="column center meige" @click="pingjahs(item.id, 3, 2, $event, index)">
												<view class="">
													<image v-if="item.score[2] == 2" class="pjyl" src="/static/pj/icon_44.png"></image>
													<image v-esle class="pjyl" src="/static/pj/icon_39.png"></image>
												</view>
												<view class="cenwz">不满意</view>
											</view>

											<view :data-id="item.id" class="column center meige" @click="pingjahs(item.id, 3, 3, $event, index)">
												<view class="">
													<image v-if="item.score[2] == 3" class="pjyl" src="/static/pj/icon_45.png"></image>
													<image v-else class="pjyl" src="/static/pj/icon_40.png"></image>
												</view>
												<view class="cenwz">一般</view>
											</view>

											<view :data-id="item.id" class="column center meige" @click="pingjahs(item.id, 3, 4, $event, index)">
												<view class="">
													<image v-if="item.score[2] == 4" class="pjyl" src="/static/pj/icon_46.png"></image>
													<image v-else class="pjyl" src="/static/pj/icon_41.png"></image>
												</view>
												<view class="cenwz">满意</view>
											</view>

											<view :data-id="item.id" class="column center meige" @click="pingjahs(item.id, 3, 5, $event, index)">
												<view class="">
													<image v-if="item.score[2] == 5" class="pjyl" src="/static/pj/icon_47.png"></image>
													<image v-esle class="pjyl" src="/static/pj/icon_42.png"></image>
												</view>
												<view class="cenwz">非常满意</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view v-else class="content">{{ item.content }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box-2">
			<view class="flex_col">
				<view class="flex_grow">
					<input type="text" class="content" v-model="content" placeholder="请输入聊天内容" placeholder-style="color:#DDD;" :cursor-spacing="6" />
				</view>
				<button class="send" @click="send">发送</button>
			</view>
		</view>
		<mxg-comment v-if="vip"></mxg-comment>
	</view>
</template>

<script>
import api from '@/api/commonc.js';
import mxgComment from '@/components/mxg-comment/mxg-comment.vue';
export default {
	components: {
		mxgComment
	},
	data() {
		return {
			pjidmax: 0, //最大评价id
			zxfei: 5,
			wtfei: 5,
			myfei: 5,
			zx: {
				zxa: 1,
				zxb: 1,
				zxc: 1,
				zxd: 1,
				zxe: 1
			},
			wt: {
				wta: 1,
				wtb: 1,
				wtc: 1,
				wtd: 1,
				wte: 1
			},
			my: {
				mya: 1,
				myb: 1,
				myc: 1,
				myd: 1,
				mye: 1
			},
			pjid: '',
			vip: false,
			dsbj: 1, //定时标记
			doctorid: '', //医生ID
			openid: '',
			userInfo: {}, //用户信息
			doctorInfo: {}, //医生详情
			talkList: [],
			ajax: {
				rows: 20, //每页数量
				page: 1, //页码
				flag: true, // 请求开关
				loading: true, // 加载中
				loadText: '正在获取消息'
			},
			content: ''
		};
	},
	mounted() {
		this.$nextTick(() => {
			this.getHistoryMsg();
		});
		this.timer = setInterval(this.dshs, 8000);
	},
	beforeDestroy() {
		clearInterval(this.timer);
	},
	onLoad(option) {
		this.myInfo();
		this.openid = uni.getStorageSync('openid');
		this.userInfo = uni.getStorageSync('userInfo');
		this.doctorid = option.id; //医生ID
	},

	onPageScroll(e) {
		if (e.scrollTop < 5) {
			this.getHistoryMsg();
		}
	},

	methods: {
		async pingjahs(id, type, fei, e, index) {
			let list = this.talkList;
			console.log('初数据', this.talkList);
			console.log('点index', index);
			console.log(list[index]);
			list[index].score[type - 1] = fei;
			this.list = list;

			// e.item.score[type-1] = fei
			var djid = e.currentTarget.dataset.id;
			if (type == 1) {
				this.zxfei = fei;
				switch (fei) {
					case 1:
						this.zx.zxa = 2;
						this.zx.zxb = 1;
						this.zx.zxc = 1;
						this.zx.zxd = 1;
						this.zx.zxe = 1;
						break;
					case 2:
						this.zx.zxa = 1;
						this.zx.zxb = 2;
						this.zx.zxc = 1;
						this.zx.zxd = 1;
						this.zx.zxe = 1;
						break;
					case 3:
						this.zx.zxa = 1;
						this.zx.zxb = 1;
						this.zx.zxc = 2;
						this.zx.zxd = 1;
						this.zx.zxe = 1;
						break;
					case 4:
						this.zx.zxa = 1;
						this.zx.zxb = 1;
						this.zx.zxc = 1;
						this.zx.zxd = 2;
						this.zx.zxe = 1;
						break;
					default:
						this.zx.zxa = 1;
						this.zx.zxb = 1;
						this.zx.zxc = 1;
						this.zx.zxd = 1;
						this.zx.zxe = 2;
						break;
				}
			} else if (type == 2) {
				this.wtfei = fei;
				switch (fei) {
					case 1:
						this.wt.wta = 2;
						this.wt.wtb = 1;
						this.wt.wtc = 1;
						this.wt.wtd = 1;
						this.wt.wte = 1;
						break;
					case 2:
						this.wt.wta = 1;
						this.wt.wtb = 2;
						this.wt.wtc = 1;
						this.wt.wtd = 1;
						this.wt.wte = 1;
						break;
					case 3:
						this.wt.wta = 1;
						this.wt.wtb = 1;
						this.wt.wtc = 2;
						this.wt.wtd = 1;
						this.wt.wte = 1;
						break;
					case 4:
						this.wt.wta = 1;
						this.wt.wtb = 1;
						this.wt.wtc = 1;
						this.wt.wtd = 2;
						this.wt.wte = 1;
						break;
					default:
						this.wt.wta = 1;
						this.wt.wtb = 1;
						this.wt.wtc = 1;
						this.wt.wtd = 1;
						this.wt.wte = 2;
						break;
				}
			} else if (type == 3) {
				this.myfei = fei;
				switch (fei) {
					case 1:
						this.my.mya = 2;
						this.my.myb = 1;
						this.my.myd = 1;
						this.my.myc = 1;
						this.my.mye = 1;
						break;
					case 2:
						this.my.mya = 1;
						this.my.myb = 2;
						this.my.myc = 1;
						this.my.myd = 1;
						this.my.mye = 1;
						break;
					case 3:
						this.my.mya = 1;
						this.my.myb = 1;
						this.my.myc = 2;
						this.my.myd = 1;
						this.my.mye = 1;
						break;
					case 4:
						this.my.mya = 1;
						this.my.myb = 1;
						this.my.myc = 1;
						this.my.myd = 2;
						this.my.mye = 1;
						break;
					default:
						this.my.mya = 1;
						this.my.myb = 1;
						this.my.myc = 1;
						this.my.myd = 1;
						this.my.mye = 2;
						break;
				}
			}

			const openid = uni.getStorageSync('openid');
			// var score = `${this.zxfei},${this.wtfei},${this.myfei}`;

			var score = list[index].score;

			// var score = this.zxfei

			console.log('点击评论', score);

			const { data } = await api.pinlun({
				openid: openid,
				id: id,
				score: score
			});

			uni.showModal({
				content: '提交成功！',
				showCancel: false,
				success: () => {}
			});
		},
		async myInfo() {
			const openid = uni.getStorageSync('openid');
			const { data } = await api.myInfo({
				openid: openid
			});

			// if (data.record.name) {
			// 	this.vip = false
			// }
		},
		dshs() {
			let _this = this;
			_this.ajax.flag = true;
			_this.getHistoryMsgDing();
		},

		// 上线用的
		async jbstate() {
			const { code } = await api.jbstate();
			console.log('判断是不是上线-方法-1是正式版', code);
			return code;
		},
		// 用户发送消息
		async messageUser() {
			let dataList = {
				id: this.doctorid,
				openid: this.openid,
				chat: this.content
			};
			const { code, message, data } = await api.messageUser(dataList);
			console.log('判断用户是不是会员方法', code);
			return code;
		},
		// 获取历史消息
		getHistoryMsg() {
			if (!this.ajax.flag) {
				return;
			}
			// 此处用到 ES7 的 async/await 知识，为使代码更加优美。不懂的请自行学习。
			let get = async () => {
				this.hideLoadTips();
				this.ajax.flag = false;
				let data = await this.joinHistoryMsg();
				// 获取待滚动元素选择器，解决插入数据后，滚动条定位时使用
				let selector = '';
				if (this.ajax.page > 1) {
					// 非第一页，则取历史消息数据的第一条信息元素
					selector = `#msg-${this.talkList[0].id}`;
				} else {
					// 第一页，则取当前消息数据的最后一条信息元素
					selector = `#msg-${data[data.length - 1].id}`;
				}
				// 将获取到的消息数据合并到消息数组中
				this.talkList = [...data, ...this.talkList];
				// 数据挂载后执行，不懂的请自行阅读 Vue.js 文档对 Vue.nextTick 函数说明。
				this.$nextTick(() => {
					// 设置当前滚动的位置
					this.setPageScrollTo(selector);
					this.hideLoadTips(true);
					if (data.length < this.ajax.rows) {
						// 当前消息数据条数小于请求要求条数时，则无更多消息，不再允许请求。
						// 可在此处编写无更多消息数据时的逻辑
					} else {
						this.ajax.page++;
						// 延迟 200ms ，以保证设置窗口滚动已完成
						setTimeout(() => {
							this.ajax.flag = true;
						}, 1);
					}
				});
			};
			get();
		},
		joinHistoryMsgDing() {
			let _this = this;
			let join = async () => {
				let arr = [];

				let dataInfo = {
					id: _this.doctorid,
					openid: _this.openid,
					page: 1
				};

				await api.liaotian(dataInfo); //调起耍的666

				const { data } = await api.messageInfo(dataInfo);

				_this.doctorInfo = data[0];

				if (data[2][0].id == _this.pageid) {
					return 1;
				}

				if (data[2][0].id != _this.pageid && _this.pageid != '') {
					_this.dsbj = 2;
				}

				//"type": "1",    //1是用户发送  2是医生发送
				data[2].forEach(function(value, key, iterable) {
					if (key == 0 && _this.pageid != value.id) {
						_this.pageid = value.id;
					}
					if (value.type == 1) {
						var photo = data[1].img;
					} else {
						var photo = data[0].img;
					}
					arr.push({
						id: value.id, // 消息的ID
						content: value.chat, // 消息内容
						// "type": Math.random() > 0.5 ? 1 : 2, // 此为消息类别，设 1 为发出去的消息，2 为收到对方的消息,
						type: value.type, // 此为消息类别，设 1 为发出去的消息，2 为收到对方的消息,
						pic: photo // 头像
					});
				});
				arr.reverse();
				return arr;
			};

			// 此处用到 ES6 的 Promise 知识，不懂的请自行学习。
			return new Promise((done, fail) => {
				// 无数据请求接口，由 setTimeout 模拟，正式项目替换为 ajax 即可。
				setTimeout(() => {
					let data = join();
					done(data);
				}, 1500);
			});
		},
		// 获取历史消息定时任务用
		getHistoryMsgDing() {
			if (!this.ajax.flag) {
				return; //
			}

			// 此处用到 ES7 的 async/await 知识，为使代码更加优美。不懂的请自行学习。
			let get = async () => {
				// this.hideLoadTips();
				this.ajax.flag = false;
				let data = await this.joinHistoryMsgDing();

				if (data == 1) {
					this.ajax.loading = false;
					this.ajax.flag = true;

					return;
				}

				if ((this.dsbj = 2)) {
					this.talkList = [];
				}

				// 获取待滚动元素选择器，解决插入数据后，滚动条定位时使用
				let selector = '';

				if (this.ajax.page > 1 && this.dsbj != 2) {
					// 非第一页，则取历史消息数据的第一条信息元素
					selector = `#msg-${this.talkList[0].id}`;
				} else {
					// 第一页，则取当前消息数据的最后一条信息元素
					selector = `#msg-${data[data.length - 1].id}`;
				}

				// 将获取到的消息数据合并到消息数组中
				this.talkList = [...data, ...this.talkList];

				// 数据挂载后执行，不懂的请自行阅读 Vue.js 文档对 Vue.nextTick 函数说明。
				this.$nextTick(() => {
					// 设置当前滚动的位置
					this.setPageScrollToDing(selector);

					// this.hideLoadTips(true);

					if (data.length < this.ajax.rows) {
						// 当前消息数据条数小于请求要求条数时，则无更多消息，不再允许请求。
						// 可在此处编写无更多消息数据时的逻辑
						this.ajax.flag = true;
					} else {
						this.ajax.flag = true;
						// 延迟 200ms ，以保证设置窗口滚动已完成
						setTimeout(() => {
							this.ajax.flag = true;
						}, 200);
					}
				});
			};
			get();
		},

		// 拼接历史记录消息，正式项目可替换为请求历史记录接口
		joinHistoryMsg() {
			let _this = this;
			let join = async () => {
				var arr = [];

				let dataInfo = {
					id: _this.doctorid,
					openid: _this.openid,
					page: _this.ajax.page
				};
				const { data } = await api.messageInfo(dataInfo);

				_this.doctorInfo = data[0];

				//"type": "1",    //1是用户发送  2是医生发送
				data[2].forEach(function(value, key, iterable) {
					if (_this.ajax.page == 1 && key == 0 && _this.pageid != value.id) {
						_this.pageid = value.id;
					}
					if (value.type == 1) {
						var photo = data[1].img;
					} else {
						var photo = data[0].img;
					}
					if (value.type == 3) {
						console.log('ALL评价id', value.id);
						if (value.id > _this.pjidmax) {
							_this.pjidmax = value.id;
						}
						console.log('最大评价id', _this.pjidmax);
					}

					arr.push({
						id: value.id, // 消息的ID
						content: value.chat, // 消息内容
						// "type": Math.random() > 0.5 ? 1 : 2, // 此为消息类别，设 1 为发出去的消息，2 为收到对方的消息,
						type: value.type, // 此为消息类别，设 1 为发出去的消息，2 为收到对方的消息,
						pic: photo, // 头像
						score: value.score
					});
				});

				arr.reverse();

				return arr;
			};

			// 此处用到 ES6 的 Promise 知识，不懂的请自行学习。
			return new Promise((done, fail) => {
				// 无数据请求接口，由 setTimeout 模拟，正式项目替换为 ajax 即可。
				setTimeout(() => {
					let data = join();
					done(data);
				}, 1);
			});
		},
		// 设置页面滚动位置
		setPageScrollTo(selector) {
			let view = uni
				.createSelectorQuery()
				.in(this)
				.select(selector);
			view.boundingClientRect(res => {
				uni.pageScrollTo({
					scrollTop: res.top - 30, // -30 为多显示出大半个消息的高度，示意上面还有信息。
					duration: 0
				});
			}).exec();
		},

		// 设置页面滚动位置
		setPageScrollToDing(selector) {
			let view = uni
				.createSelectorQuery()
				.in(this)
				.select(selector);
			view.boundingClientRect(res => {
				uni.pageScrollTo({
					scrollTop: 10000, // -30 为多显示出大半个消息的高度，示意上面还有信息。
					duration: 0
				});
			}).exec();
		},
		// 隐藏加载提示
		hideLoadTips(flag) {
			if (flag) {
				this.ajax.loadText = '消息获取成功';
				setTimeout(() => {
					this.ajax.loading = false;
				}, 1);
			} else {
				this.ajax.loading = true;
				this.ajax.loadText = '正在获取消息';
			}
		},
		// 发送信息
		async send() {
			//1成功 0 失败 2弹出弹窗
			var code = await this.messageUser();
			console.log('判断用户是不是会员点发送按钮', code);

			var codexian = await this.jbstate();
			console.log('判断是不是上线-点发送按钮-1是正式版', codexian);
			
			if (code == 2 && codexian == 1) {
				this.vip = true;
				return
			}

			if (!this.content) {
				uni.showToast({
					title: '请输入有效的内容',
					icon: 'none'
				});
				return;
			}

			uni.showLoading({
				title: '正在发送'
			});
			setTimeout(() => {
				uni.hideLoading();

				// 将当前发送信息 添加到消息列表。
				let data = {
					id: new Date().getTime(),
					content: this.content,
					type: 1,
					pic: this.userInfo.avatarUrl
				};
				this.talkList.push(data);
				//提交后台
					this.$nextTick(() => {
						// 清空内容框中的内容
						// this.content = '发送失败';
						this.content = '';
						uni.pageScrollTo({
							scrollTop: 999999, // 设置一个超大值，以保证滚动条滚动到底部
							duration: 0
						});
					});
				
			}, 1500);
		}
	}
};
</script>

<style lang="scss">
@import './lib/global.scss';

page {
	background-color: #f3f3f3;
	font-size: 28rpx;
}

.pjyl {
	width: 62rpx;
	height: 62rpx;
}

.meige {
	padding-left: 20rpx;
}

.titleb {
	height: 26rpx;
	font-size: 26rpx;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #333333;
	line-height: 26rpx;
	margin-bottom: 20rpx;
}

.tyeps {
	all: initial;
}

.abc {
	width: 600rpx !important;
}

.ddd {
	margin-bottom: 50rpx;
}

.cenwz {
	width: 100rpx;
	height: 22rpx;
	font-size: 22rpx;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #666666;
	line-height: 36rpx;
	white-space: nowrap;
	text-align: center;
}

.tname {
	margin-left: 30rpx;
	margin-bottom: 10rpx;
}

/* 加载数据提示 */
.tips {
	position: fixed;
	left: 0;
	top: var(--window-top);
	width: 100%;
	z-index: 9;
	background-color: rgba(0, 0, 0, 0.15);
	height: 72rpx;
	line-height: 72rpx;
	transform: translateY(-80rpx);
	transition: transform 0.3s ease-in-out 0s;

	&.show {
		transform: translateY(0);
	}
}

.box-1 {
	width: 100%;
	height: auto;
	padding-bottom: 100rpx;
	box-sizing: content-box;

	/* 兼容iPhoneX */
	margin-bottom: 0;
	margin-bottom: constant(safe-area-inset-bottom);
	margin-bottom: env(safe-area-inset-bottom);
}

.box-2 {
	position: fixed;
	left: 0;
	width: 100%;
	bottom: 0;
	height: auto;
	z-index: 2;
	border-top: #e5e5e5 solid 1px;
	box-sizing: content-box;
	background-color: #f3f3f3;

	/* 兼容iPhoneX */
	padding-bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);

	> view {
		padding: 0 20rpx;
		height: 100rpx;
	}

	.content {
		background-color: #fff;
		height: 64rpx;
		padding: 0 20rpx;
		border-radius: 32rpx;
		font-size: 28rpx;
	}

	.send {
		// background-color: #42b983;
		background: linear-gradient(90deg, #bb73d5, #643a92);
		color: #fff;
		height: 64rpx;
		margin-left: 20rpx;
		border-radius: 32rpx;
		padding: 0;
		width: 120rpx;
		line-height: 62rpx;

		&:active {
			background-color: #5fc496;
		}
	}
}

.talk-list {
	padding-bottom: 20rpx;

	/* 消息项，基础类 */
	.item {
		padding: 20rpx 20rpx 0 20rpx;
		align-items: flex-start;
		align-content: flex-start;
		color: #333;

		.pic {
			width: 92rpx;
			height: 92rpx;
			border-radius: 50%;
			border: #fff solid 1px;
		}

		.content {
			padding: 20rpx;
			border-radius: 4px;
			max-width: 600rpx;
			word-break: break-all;
			line-height: 52rpx;
			position: relative;
		}

		/* 收到的消息 */
		&.pull {
			.content {
				margin-left: 32rpx;
				background-color: #fff;

				&::after {
					content: '';
					display: block;
					width: 0;
					height: 0;
					border-top: 16rpx solid transparent;
					border-bottom: 16rpx solid transparent;
					border-right: 20rpx solid #fff;
					position: absolute;
					top: 10rpx;
					left: -18rpx;
				}
			}
		}

		/* 发出的消息 */
		&.push {
			/* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
			flex-direction: row-reverse;

			.content {
				margin-right: 32rpx;
				background-color: #643a92;
				color: #ffffff;

				&::after {
					content: '';
					display: block;
					width: 0;
					height: 0;
					border-top: 16rpx solid transparent;
					border-bottom: 16rpx solid transparent;
					border-left: 20rpx solid #643a92;
					position: absolute;
					top: 30rpx;
					right: -18rpx;
				}
			}
		}
	}
}
</style>
